<template>
  <up-popup :show="show" @close="hidePopup">
    <view class="header">群列表</view>
    <scroll-view class="content" scroll-y>
      <view class="list">
        <view class="row head">
          <view class="col">名称</view>
          <view class="col">归属员工</view>
        </view>
        <view class="row" v-for="(item, index) in list" :key="index">
          <view class="col">{{item.chat_name}}</view>
          <view class="col">
            <view class="user">
              <u-avatar :src="item.owner_avatar||defaultAvatar" size="25"/>
              <view>
                <view>{{item.owner_name}}</view>
                <view v-if="item.department_name" class="dp">{{item.department_name}}</view>
              </view>
            </view>
          </view>
        </view>
        <view class="more">～没有更多了～</view>
      </view>
    </scroll-view>
    <view class="footer"></view>
  </up-popup>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const defaultAvatar = "http://static.fastht.com/b58a61c649ac8871/fa87d808bf4e677a.png"

const emit = defineEmits(['close'])

const show = ref(false)
const list = ref<any[]>([])

function showPopup(value:any[]) {
  if(value.length===0) return
  list.value = value
  show.value = true;
}
function hidePopup() {
  show.value = false;
  emit('close');
}

defineExpose({ showPopup, hidePopup })
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  .text {
    margin-left: 5rpx;
  }
}
.header {
  padding: 30rpx;
  text-align: center;
  font-size: 30rpx;
  font-weight: bold;
}
.content {
  // padding: 0 30rpx;
  box-sizing: border-box;
  max-height: 60vh;
  .list {
    padding: 0 30rpx;
    .row {
      display: flex;
      padding: 20rpx 0;
      border-bottom: 1px solid #eee;
      align-items: center;

      .col {
        padding: 0 20rpx;
        overflow: hidden;

        .avatar {
          width: 50rpx;
          height: 50rpx;
          border-radius: 50%;
          margin-right: 10rpx;
          vertical-align: middle;
        }

        .user {
          display: flex;
          align-items: center;

          .dp {
            font-size: 28rpx;
            color: #999;
          
          }
        }

        &:nth-child(1) {
          width: 40%;
        }
        &:nth-child(2) {
          flex: 1;
        }
      }

      &.head {
        background-color: #f7f7f7;
      }
    }

    .more {
      padding: 30rpx;
      text-align: center;
      color: #ccc;
    }
  }
}
.footer {
  padding: 30rpx;
}
</style>
